<template>
    <section>
        <div class="cate-container">
            <div class="header flex-box flex-box-display">
                <h4>订单列表</h4>
                <el-button type="primary">打印</el-button>
            </div>
            <div class="cate-search flex-box">
                <el-row>
                    <el-select v-model="in_blacklist" placeholder="是否加入黑名单">
                        <el-option v-for="option in blacklist" :key="option.value"
                                   :label="option.text" :value="option.value">
                            {{ option.text }}
                        </el-option>
                    </el-select>
                    <el-col :span="5">
                        <div class="">
                            <el-input v-model="usersName" placeholder="搜索微信昵称"></el-input>
                        </div>
                    </el-col>
                    <el-col :span="5">
                        <div class="">
                            <el-input v-model="openid" placeholder="搜索微信openid"></el-input>
                        </div>
                    </el-col>
                    <el-col :span="5">
                        <div class="">
                            <el-input v-model="sn" placeholder="搜索编号"></el-input>
                        </div>
                    </el-col>
                    <el-col :span="5">
                        <div class="">
                            <el-input v-model="orderName" placeholder="搜索收货人名称"></el-input>
                        </div>
                    </el-col>
                    <el-col :span="5">
                        <div class="">
                            <el-input v-model="orderPhone" placeholder="搜索收货人电话"></el-input>
                        </div>
                    </el-col>
                    <el-col :span="5">
                        <div class="">
                            <el-input v-model="orderAddress" placeholder="搜索收货人地址"></el-input>
                        </div>
                    </el-col>
                    <el-col :span="4">
                        <div class="">
                            <el-button type="primary" @click="searchItem">搜索</el-button>
                        </div>
                    </el-col>
                </el-row>
            </div>
            <div class="cate-con">
                <el-table ref="multipleTable" :data="ordersList" style="width: 100%"
                          @selection-change="handleSelectionChange">
                    <el-table-column
                            type="selection">
                    </el-table-column>
                    <el-table-column :resizable="false" label="id">
                        <template slot-scope="scope">
                            <span>{{scope.row.id}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column :resizable="false" label="用户昵称">
                        <template slot-scope="scope">
                            <span>{{scope.row.nickname}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column :resizable="false" label="收货人名称">
                        <template slot-scope="scope">
                            <span>{{scope.row.avatar_url}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column :resizable="false" label="收货人地址">
                        <template slot-scope="scope">
                            <span>{{scope.row.sex === 1 ? '男' : '女'}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column :resizable="false" label="收货人手机">
                        <template slot-scope="scope">
                            <span>{{scope.row.city}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column :resizable="false" label="编号">
                        <template slot-scope="scope">
                            <span>{{scope.row.openid ? scope.row.openid :''}}</span>
                            <span>{{scope.row.xcx_openid ? scope.row.xcx_openid :''}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column :resizable="false" label="状态">
                        <template slot-scope="scope">
                            <span>{{scope.row.parent_id}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column :resizable="false" label="支付类型">
                        <template slot-scope="scope">
                            <span>{{scope.row.created_at}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column :resizable="false" label="支付状态">
                        <template slot-scope="scope">
                            <span>{{scope.row.created_at}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column :resizable="false" label="打印状态">
                        <template slot-scope="scope">
                            <span>{{scope.row.created_at}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column :resizable="false" label="备注">
                        <template slot-scope="scope">
                            <span>{{scope.row.created_at}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column :resizable="false" label="商品总数">
                        <template slot-scope="scope">
                            <span>{{scope.row.created_at}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column :resizable="false" label="总价格">
                        <template slot-scope="scope">
                            <span>{{scope.row.created_at}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column :resizable="false" label="使用积分">
                        <template slot-scope="scope">
                            <span>{{scope.row.created_at}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column :resizable="false" label="支付金额">
                        <template slot-scope="scope">
                            <span>{{scope.row.created_at}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column :resizable="false" label="是否自提">
                        <template slot-scope="scope">
                            <span>{{scope.row.created_at}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column :resizable="false" label="配送区域">
                        <template slot-scope="scope">
                            <span>{{scope.row.created_at}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column :resizable="false" label="配送时间">
                        <template slot-scope="scope">
                            <span>{{scope.row.created_at}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column :resizable="false" label="支付时间">
                        <template slot-scope="scope">
                            <span>{{scope.row.created_at}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column :resizable="false" label="创建时间">
                        <template slot-scope="scope">
                            <span>{{scope.row.created_at}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column :resizable="false" prop="operation" label="操作">
                        <template slot-scope="scope">
                            <el-button @click="showItem(scope.$index, scope.row.id)" type="text"
                                       size="small" icon="el-icon-view"></el-button>
                            <el-button @click="editItem(scope.$index, scope.row.id)" type="text" size="small"
                                       icon="el-icon-edit-outline"></el-button>
                            <!--<el-button @click="deleteItem(scope.$index, scope.row.id)" type="text"-->
                            <!--size="small" icon="el-icon-delete"></el-button>-->
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div class="pagination" v-if="page.total">
                <div class="pagination-item">
                    <el-pagination layout="prev, pager, next" :total="page.total" :page-size="pageSize"
                                   @current-change="handleCurrentChange">
                    </el-pagination>
                </div>
            </div>
        </div>
        <el-dialog
                title="用户信息"
                :visible.sync="dialogVisible"
                :before-close="handleClose"
                width="90%">
            <div class="flex-box">
                <form-row :label="`id`" :required="true">
                    <div slot="item" class="form-row__item">{{showList.id}}</div>
                </form-row>
                <form-row :label="`昵称`" :required="true">
                    <div slot="item" class="form-row__item">{{showList.nickname}}</div>
                </form-row>
                <form-row :label="`头像`" :required="true">
                    <div slot="item" class="form-row__item">{{showList.avatar_url}}</div>
                </form-row>
                <form-row :label="`城市`" :required="true">
                    <div slot="item" class="form-row__item">{{showList.city}}</div>
                </form-row>
            </div>
            <div class="flex-box">
                <form-row :label="`上级信息`" :required="true">
                    <div slot="item" class="form-row__item">{{showList.parent_id}}</div>
                </form-row>
                <form-row :label="`下级信息`" :required="true">
                    <div slot="item" class="form-row__item">{{showList.brand}}</div>
                </form-row>
                <form-row :label="`优惠券`" :required="true">
                    <div slot="item" class="form-row__item">{{showList.provider_name}}</div>
                </form-row>
                <form-row :label="`地址信息`" :required="true">
                    <div slot="item" class="form-row__item">{{showList.number}}</div>
                </form-row>
            </div>
            <div class="flex-box">
                <form-row :label="`创建时间`" :required="true">
                    <div slot="item" class="form-row__item">{{showList.created_at}}</div>
                </form-row>
                <form-row :label="`更新时间`" :required="true">
                    <div slot="item" class="form-row__item">{{showList.updated_at}}</div>
                </form-row>
            </div>
        </el-dialog>
    </section>
</template>

<script>
    import FormRow from '../../components/basic/FlowRow.vue';

    export default {
        components: {
            FormRow
        },
        data() {
            return {
                id:'',
                ordersList: [],
                sn:'',
                orderName:'',
                orderPhoto:'',
                orderAddress:'',
                usersName: '',
                openid: '',

                page: {
                    total: null
                },
                pageSize: 20,

                showList: [],
                dialogVisible: false,
                currentRow: null
            }
        },
        watch: {},
        created() {
            this.id = this.$route.query.id;
            this.getUsersList(parseInt(this.$route.query.id));
        },
        mounted() {},
        methods: {
            searchItem() {
                console.log('黑名单', this.in_blacklist, '昵称', this.usersName, 'openid', this.openid)
                axios
                    .get('admin_users', {
                        params: {
                            in_blacklist: this.in_blacklist,
                            name: this.usersName,
                            openid: this.openid
                        }
                    })
                    .then(res => res.data.data)
                    .then(res => {
                        console.log('数据', res)
                        this.ordersList = res;
                        this.tableLoading = false;
                    })
            },
            getUsersList(id,pagination = 1) {
                axios
                    .get(`admin_users/{$id}`, {
                        params: {
                            pagination,
                            pageSize: this.pageSize
                        }
                    })
                    .then(res => {
                        this.page.total = res.data.count;
                        return res;
                    })
                    .then(res => res.data.data)
                    .then(res => {
                        console.log('数据', res)
                        this.ordersList = res;
                        this.tableLoading = false;

                    })
            },
            deleteItem(index, id) {
                this.$confirm('是否确认删除该商品?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                })
                    .then(() => {
                        return axios
                            .post(`admin_goods/${id}`, {_method: 'DELETE'})
                            .then(
                                res => (res.data.status === 1 ? Promise.resolve() : Promise.reject(res.data.msg))
                            );
                    })
                    .then(() => {
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        });
                        this.getGoodList()();
                    })
                    .catch(err => {
                        this.$message.error(err);
                    });
            },
            handleCurrentChange(current) {
                this.getGoodList(current);
            },
            showItem(index, id) {
                this.handleClose();
                this.showList = this.goodList[index];
                console.log('展示', this.showList)
            },
            handleClose() {
                this.dialogVisible = !this.dialogVisible;
            }
        }
    }
</script>
<style scoped>
    .cate-container {
        margin: 25px;
        border-radius: 4px;
        background: #fff;
        min-height: calc(100vh - 92px);
    }

    .flex-box {
        display: flex;
    }

    .flex-box-display {
        justify-content: space-between;
    }

    .header {
        padding: 10px;

        border-bottom: 1px solid #d8d8d8;
    }

    .cate-search {
        padding: 10px 30px 0 30px;
    }

    .cate-con {
        min-height: 100vh;
        padding: 5px 20px 20px 20px;
    }

    .pagination {
        display: flex;
        align-items: center;
        justify-content: space-around;

        width: 100%;
    }

    el-dialog {
        line-height: 40px;
    }
</style>